import React, { Component, lazy, Suspense } from "react";
// todo lazy就是用来做组件懒加载的
// todo lazy需要配合Suspense一起使用

// import Child from "./Child";
const Child = lazy(() => import("./Child"));

const Loading = () => {
  return <div>loading,,,,,</div>;
};

class App extends Component {
  state = {
    show: false,
  };
  fn = () => {
    this.setState({
      show: true,
    });
  };
  render() {
    return (
      <>
        <h2>组件懒加载</h2>
        <button onClick={this.fn}>btn</button>
        {/* fallback表示组件在加载的过程中显示的内容 */}
        <Suspense fallback={<Loading />}>
          {this.state.show && <Child />}
        </Suspense>
      </>
    );
  }
}

export default App;
